<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> APP用户 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="search-box">
                <div class="searchDiv">
                    <el-form :inline="true">
                        <el-form-item label="用户代码">
                            <el-input
                                v-model="searchSet.userCode"
                                prefix-icon="el-icon-search"
                                clearable
                                placeholder="请输入用户代码"
                            ></el-input>
                        </el-form-item>

                        <el-form-item label="用户昵称">
                            <el-input
                                v-model="searchSet.userName"
                                prefix-icon="el-icon-search"
                                clearable
                                placeholder="请输入用户昵称"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="用户国家">
                            <el-input
                                v-model="searchSet.countryName"
                                prefix-icon="el-icon-search"
                                clearable
                                placeholder="请输入用户国家"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="注册起止时间">
                            <el-date-picker
                                v-model="searchSet.startTime"
                                clearable
                                type="datetime"
                                placeholder="选择日期时间"
                                align="right"
                                :picker-options="pickerTimeOptions"
                            >
                            </el-date-picker>
                            &nbsp; <label for="">~</label> &nbsp;
                            <el-date-picker
                                v-model="searchSet.endTime"
                                clearable
                                type="datetime"
                                placeholder="选择日期时间"
                                align="right"
                                :picker-options="pickerTimeOptions"
                            ></el-date-picker>
                        </el-form-item>
                        <el-form-item label="删除状态">
                            <el-select v-model="searchSet.status" placeholder="选择状态" clearable>
                                <el-option label="已删除" value="0"></el-option>
                                <el-option label="正常" value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        <el-button type="primary" icon="el-icon-download" @click="handleExport">导出</el-button>
                    </el-form>
                </div>
            </div>
            <el-table
                :data="tableData"
                v-loading="tableLoading"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <!-- <el-table-column prop="id"
                         label="用户ID"
                         align="center"></el-table-column> -->
                <el-table-column prop="usercode" label="用户代码" align="center"></el-table-column>
                <el-table-column prop="nickname" label="用户昵称" align="center"></el-table-column>
                <el-table-column prop="name" label="用户姓名" align="center"></el-table-column>
                <el-table-column prop="countryname" label="用户国家" align="center"></el-table-column>
                <el-table-column prop="mobile" label="手机号" align="center"></el-table-column>
                <el-table-column prop="addtime" label="注册时间" align="center"></el-table-column>
                <el-table-column label="账号余额" width="170" align="center">
                    <template slot-scope="scope">
                        <template v-if="scope.row.accounts && scope.row.accounts.length > 0">
                            <div v-for="(item, index) in scope.row.accounts" :key="index" class="FlexRowLineVCenter">
                                <div>{{ item.currencyname }}：</div>
                                <div>{{ item.amount }}</div>
                            </div>
                        </template>
                        <div v-else>暂无余额</div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="70" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="statusList[scope.row.status] ? statusList[scope.row.status].tagtype : 'info'">
                            {{ statusList[scope.row.status] ? statusList[scope.row.status].name : '无效' }}</el-tag
                        >
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-s-order" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                        <el-button type="text" icon="el-icon-s-order" @click="handleAccountDetail(scope.$index, scope.row)"
                            >账户明细</el-button
                        >
                        <el-button
                            v-if="scope.row.status != 0"
                            type="text"
                            :class="scope.row.status == 1 ? 'color-red' : 'color-Green'"
                            icon="el-icon-warning"
                            @click="handleDisable(scope.row, scope.row.status == 1)"
                            >{{ scope.row.status == 1 ? '进行禁用' : '解除禁用' }}</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="query.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="query.pageSize"
                    :total="itemTotal"
                    @current-change="handlePageChange"
                    @size-change="handlePageSizeChange"
                ></el-pagination>
            </div>
        </div>
        <detailDialog :visible.sync="detailVisible" :data="detailInfo" :dataType="detailType">
            <template slot="accounts">
                <el-descriptions-item label="账号余额" :span="2">
                    <template v-if="detailInfo.accounts && detailInfo.accounts.length > 0">
                        <div v-for="(item, index) in detailInfo.accounts" :key="index" class="FlexRowVCenter">
                            <div>{{ item.currencyname }}：</div>
                            <div>{{ item.amount }}</div>
                        </div>
                    </template>
                    <div v-else>暂无余额</div>
                </el-descriptions-item>
            </template>
        </detailDialog>
        <el-dialog title="帐户明细" v-dialogDrag center :visible.sync="detailAccountVisible" width="85%">
            <el-descriptions :column="1" style="margin-bottom: 20px" border>
                <el-descriptions-item label="用户编码">
                    {{ detailform.usercode }}
                </el-descriptions-item>
                <el-descriptions-item label="用户姓名">
                    {{ detailform.userName }}
                </el-descriptions-item>
                <el-descriptions-item label="用户编码">
                    {{ detailform.userMobil }}
                </el-descriptions-item>
            </el-descriptions>
            <div>
                <div>合计:</div>
                <div>
                    <ul>
                        <li v-for="item in detailUserAccounts" :key="item.currencyid">
                            {{ item.currencyname }}:<span>充值金额:</span>{{ item.chargeamount }}<span>支出金额:</span
                            >{{ item.consumeamount }}
                        </li>
                    </ul>
                </div>
            </div>
            <!-- <el-table
                :data="detailUserAccounts"
                v-loading="false"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >                
                <el-table-column prop="currencyname" label="币种" align="center"></el-table-column>
                <el-table-column prop="chargeamount" label="充值金额" align="center"></el-table-column>
                <el-table-column prop="consumeamount" label="支出金额" align="center"></el-table-column>                
            </el-table> -->
            <el-table
                :data="tableDetailData"
                v-loading="tableDetailLoading"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column label="状态" align="center">
                    <template slot-scope="scope">
                        <div
                            class="CustomTag"
                            :style="{
                                'background-color': typeOption[scope.row.type] ? typeOption[scope.row.type].color : '#909399'
                            }"
                        >
                            {{ typeOption[scope.row.type] ? typeOption[scope.row.type].label : '无效' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="currencyname" label="币种" align="center"></el-table-column>
                <el-table-column prop="amount" label="金额" align="center"></el-table-column>
                <el-table-column prop="adduser" label="经手人" align="center"></el-table-column>
                <el-table-column prop="addtime" label="时间" align="center"></el-table-column>
                <el-table-column label="充值方式" align="center">
                    <template slot-scope="scope">
                        <div
                            class="CustomTag"
                            :style="{
                                'background-color': chargeTypeOption[scope.row.paytype]
                                    ? chargeTypeOption[scope.row.paytype].color
                                    : '#909399'
                            }"
                        >
                            {{ chargeTypeOption[scope.row.paytype] ? chargeTypeOption[scope.row.paytype].label : '系统清账' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="订单" width="120" align="center">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            icon="el-icon-s-order"
                            @click="handleDetailOrder(scope.$index, scope.row)"
                            v-if="scope.row.ordercode"
                            >{{ scope.row.ordercode }}</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                    background
                    layout="sizes, total, prev, pager, next"
                    :current-page="detailQuery.index"
                    :page-sizes="[10, 20, 30, 40, 50, 100]"
                    :page-size="detailQuery.pageSize"
                    :total="itemDetailTotal"
                    @current-change="handleDetailPageChange"
                    @size-change="handleDetailPageSizeChange"
                ></el-pagination>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="detailAccountVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <detailDialog :visible.sync="detailOrderVisible" :data="detailOrderForm" :dataType="detailOrderType"> </detailDialog>
    </div>
</template>

<script>
import API from '../../../api/index'; //读入restfulAPI
import StringTool from '../../../utils/StringTool';
import detailDialog from '../../common/dialog/detailDialog.vue';
import dataTable from './dataTable';
export default {
    name: 'appuser',
    mixins: [dataTable],
    components: {
        detailDialog
    },
    data() {
        return {
            searchSet: {
                userCode: '',
                userName: '',
                countryName: '',
                startTime: '',
                endTime: '',
                status: ''
            },
            query: {
                index: 1,
                pageSize: 10
            },
            statusList: {
                0: { name: '无效', id: '0', tagtype: 'info' },
                1: { name: '正常', id: '1', tagtype: 'success' },
                2: { name: '已禁用', id: '2', tagtype: 'danger' }
            },
            detailVisible: false,
            detailInfo: {},
            detailType: [
                {
                    attrs: { column: 2 },
                    list: [
                        { label: '用户代码', key: 'usercode' },
                        { label: '用户ID', key: 'id' },
                        { label: '用户昵称', key: 'nickname' },
                        { label: '用户姓名', key: 'name' },
                        { label: '用户手机号', key: 'mobile' },
                        { label: '用户邮箱', key: 'email' },

                        { label: '用户性别', key: 'gender' },
                        { label: '用户生日', key: 'birthdate' },
                        { label: '国家编码', key: 'countrycode' },
                        { label: '所在国家', key: 'countryname' },
                        { label: '所在城市', key: 'cityname' },
                        { label: '注册时间', key: 'addtime' },

                        { label: '详细地址', key: 'address', span: 2 },
                        { key: 'accounts', type: 'slot' }
                    ]
                }
            ],
            detailQuery: {
                index: 1,
                pageSize: 10
            },
            detailAccountVisible: false,
            detailform: {},
            detailVisible: false,
            tableDetailData: [],
            itemDetailTotal: 0,
            tableDetailLoading: false,
            detailUserAccounts: [],
            typeOption: {
                '-1': { label: '支出', value: '-1', color: '#ffb248' },
                1: { label: '充值', value: '1', color: '#339ca8' }
            },

            chargeTypeOption: {
                1: { label: '银行转帐', value: 1, color: '#ffb248' },
                2: { label: '微信转帐', value: 2, color: '#339ca8' },
                3: { label: '支付宝转帐', value: 3, color: '#eb8146' },
                4: { label: '现金', value: 4, color: '#67C23A' }
            },
            detailOrderVisible: false,
            detailVisible: false,
            detailOrderQuery: {},
            detailOrderForm: {
                id: '',
                code: '',
                agentid: '',
                agentname: '',
                agentprice: '',
                localagentprice: '',
                price: '',
                freightprice: '',
                appusercode: '',
                username: '',
                userPay: {},
                agentPay: {}
            },
            detailOrderType: [
                {
                    attrs: { column: 2, title: '基础信息' },
                    list: [
                        { label: '内单号', key: 'code' },
                        { label: '代理商', key: 'agentname' },
                        { label: '代理商价格$', key: 'agentprice' },
                        { label: '支付金额$', key: 'price' },
                        { label: '客户代码', key: 'appusercode' }
                    ]
                },
                {
                    attrs: { column: 2, title: '客户支付' },
                    list: [
                        { label: '支付时间', key: 'userPaypaytime' },
                        { label: '经手人', key: 'userPayusername' },
                        { label: '货币', key: 'userPaycurrencyname' },
                        { label: '金额', key: 'userPayamount' }
                    ]
                },
                {
                    attrs: { column: 2, title: '代理商支付' },
                    list: [
                        { label: '支付时间', key: 'agentPaypaytime' },
                        { label: '经手人', key: 'agentPayusername' },
                        { label: '货币', key: 'agentPaycurrencyname' },
                        { label: '金额', key: 'agentPayamount' }
                    ]
                }
            ]
        };
    },
    created() {
        this.init();
    },
    mounted() {},
    methods: {
        //页面初始化
        init() {
            this.getData();
        },

        getData() {
            this.tableLoading = true;
            API.StandardDoWith(API.Appuser.Get(this.getQuery()), this, {
                success: (detail) => {
                    detail.list.map((it) => {
                        it.accounts.map((account) => {
                            account.amount = StringTool.FormatDigit(account.amount);
                        });
                    });
                    this.itemTotal = detail.count;
                    this.tableData = detail.list;
                },
                complete: () => {
                    this.tableLoading = false;
                }
            });
        },

        handleDetail(index, row) {
            let obj = Object.assign({}, row);
            this.detailInfo = obj;
            this.detailVisible = true;
        },
        handleExport() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    API.StandardDownFile(API.AppUserExport(), 'APP用户管理数据.xlsx');
                })
                .catch((err) => {});
        },
        handleAccountDetail(index, row) {
            this.detailform = null;
            this.tableDetailData = [];
            this.itemDetailTotal = 0;
            this.detailUserAccounts = [];
            this.detailQuery = {
                index: 1,
                pageSize: 10
            };
            this.detailform = {};
            this.detailform.appuser = row.id;
            this.detailform.usercode = row.usercode;
            this.detailform.userMobil = row.mobile;
            this.detailform.userName = row.name;

            this.detailQuery.id = this.detailform.appuser;
            this.getDetailData();
        },
        getDetailData() {
            this.tableDetailLoading = false;
            API.StandardDoWith(API.AppUserData.Get(this.detailQuery), this, {
                success: (detail) => {
                    this.tableDetailData = detail.list;
                    this.itemDetailTotal = detail.count;
                    this.detailUserAccounts = detail.accounts;
                    this.detailAccountVisible = true;
                },
                complete: () => {
                    this.tableDetailLoading = false;
                }
            });
        },
        handleDetailPageChange(val) {
            this.$set(this.detailQuery, 'index', val);
            this.getDetailData();
        },
        handleDetailPageSizeChange(val) {
            this.$set(this.detailQuery, 'pageSize', val);
            this.getDetailData();
        },
        handleDetailOrder(index, row) {
            this.detailOrderForm = null;
            this.detailOrderForm = {};
            this.detailOrderForm.code = row.ordercode;
            this.detailOrderQuery.code = this.detailOrderForm.code;
            API.StandardDoWith(API.PackageDeliver.Get(this.detailOrderQuery), this, {
                success: (detail) => {
                    console.log(detail);
                    detail = detail.list[0];
                    this.detailOrderForm.id = detail.id;
                    this.detailOrderForm.agentid = detail.agentid;
                    this.detailOrderForm.agentname = detail.agentname;
                    this.detailOrderForm.agentprice = detail.agentprice;
                    this.detailOrderForm.localagentprice = detail.localagentprice;
                    this.detailOrderForm.price = detail.price;
                    this.detailOrderForm.freightprice = detail.freightprice;
                    this.detailOrderForm.appusercode = detail.appusercode;
                    this.detailOrderForm.username = detail.userName;

                    if (detail.userPay) {
                        this.detailOrderForm.userPaypaytime = detail.userPay.paytime;
                        this.detailOrderForm.userPayuserid = detail.userPay.userid;
                        this.detailOrderForm.userPayusername = detail.userPay.username;
                        this.detailOrderForm.userPaycurrencyid = detail.userPay.currencyid;
                        this.detailOrderForm.userPaycurrencyname = detail.userPay.currencyname;
                        this.detailOrderForm.userPayamount = detail.userPay.amount;
                    }
                    if (detail.agentPay) {
                        this.detailOrderForm.agentPaypaytime = detail.agentPay.paytime;
                        this.detailOrderForm.agentPayuserid = detail.agentPay.userid;
                        this.detailOrderForm.agentPayusername = detail.agentPay.username;
                        this.detailOrderForm.agentPaycurrencyid = detail.agentPay.currencyid;
                        this.detailOrderForm.agentPaycurrencyname = detail.agentPay.currencyname;
                        this.detailOrderForm.agentPayamount = detail.agentPay.amount;
                    }
                },
                complete: () => {
                    this.detailOrderVisible = true;
                }
            });
        },
        handleExport() {
            this.$confirm('是否导出Excel数据?', '提示')
                .then(() => {
                    API.StandardDownFile(API.IncomeExport(), '收入数据.xlsx');
                })
                .catch((err) => {});
        },
        handleDisable(row, disable) {
            let tip = disable ? '进行禁用' : '解除禁用';
            this.$confirm(`确定要${tip}吗？`, '提示', {
                type: 'warning'
            })
                .then(() => {
                    API.StandardDoWith(API.Appuser.Put({ id: row.id, disable: disable }), this, {
                        loading: tip + '处理中',
                        success: (detail) => {
                            this.$message.success(`${tip}成功`);
                            this.getData();
                        }
                    });
                })
                .catch(() => {});
        }
    }
};
</script>

<style scoped>
@import '../../../assets/css/dataTable.css';
</style>
